<template>
	<div class="mypage allbgc">
		<!-- {{$store.state.a}} -->
		<!-- $store.commit('在mutations里的方法名',要改的值) -->
		<!-- <button @click="$store.commit('changea',2)">改</button> -->
		
		<!-- 已经登陆显示这个 -->
		<div class="mypage-top" v-if="isLogin">
			<div class="mypage-name">
				<p><i><img :src="userInfo.avatar"></i><span>{{userInfo.nickname}}</span></p>
				<button><router-link to="/user">编辑资料</router-link></button>
			</div>
			<div class="mypage-good">
				<div><span>{{publish_num}}</span><em>头条</em></div>
				<div><span>{{liked_num}}</span><em>获赞</em></div>
			</div>
			<div class="mypage-like">
				<div><span><van-icon name="star-o" color="#ec5779" size="6vw"/></span><em>收藏</em></div>
				<div><span><van-icon name="clock-o" color="#ff9d1d" size="6vw"/></span><em>历史</em></div>
			</div>
		</div>
		
		<!-- 尚未登陆显示这个 -->
		<div class="mypage-top-n" v-else @click="$router.push('/log')">
			<div>
				登录 / 注册
			</div>
		</div>

		<!-- 展示箭头 -->
		<div class="mypage-main">
			<van-cell title="修改密码" is-link/>
			<van-cell title="联系我们" is-link />
			<van-cell title="关于我们" is-link />
		</div>

		<div class="mypage-quit">
			<button @click="logout">退出登录</button>
		</div>
	</div>
</template>

<script>
	import { Dialog } from 'vant';
	import {mapState,mapMutations} from 'vuex';  //也可以不用这个 自己进行封装 如下
	// function mapState(arr){
	// 	let obj={};
	// 	arr.forEach(v=>{
	// 		obj[v]=function(){
	// 			return this.$store.state[v]
	// 		}
	// 	})
	// 	return obj 
	// }
	export default{
		name:"MyPage",
		data(){
			return{
				avatar:"",
				nickname:""
			}
		},
		components: {
		    [Dialog.Component.name]: Dialog.Component,
		},
		// vuex 全局的响应式变量   数据在内存中存放 一刷新就没了
		computed:{
			...mapState(['uid','token','isLogin','userInfo','liked_num','publish_num']) //是下面注释的的简写
			// uid(){
			// 	return this.$store.state.uid
			// },
			// token(){
			// 	return this.$store.state.token
			// }
			
		},
		methods:{
			...mapMutations(['clear']),
			// 用async  await方法
			async logout(){
				let res=await Dialog.confirm({
					title:"提示",
					message: '您确定要退出登录吗'
				});
				if(res=='confirm'){
					localStorage.clear() //清除所有token
					// localStorage.removeItem("token") 清除指定的token
					// this.$store.commit('clear')
					this.clear()
					this.$toast('退出成功');
					this.$router.push('/home')
				}
			},
			nolog(){
				this.$toast('尚未登录，请先去登录');
			}
			// logout(){
			// 	Dialog.confirm({
			// 	title: '提示',
			// 	message: '您确定要退出登录吗',
			// 	})
			// 	.then(() => {
			// 		// on confirm
			// 		localStorage.clear() //清除所有token
			// 		// localStorage.removeItem("token") 清除指定的token
			// 		this.$store.commit('clear')
			// 		this.$toast('退出成功');
			// 		this.$router.push('/home')
			// 	})
			// 	.catch(() => {
			// 		// on cancel
			// 	});
			// }
			
		}
	}
</script>

<style lang="less">
	.mypage{
		position: relative;
	}
	.mypage-top-n{
		height: 180px;
		line-height: 180px;
		text-align: center;
		background-color: @color;
		color: #fff;
	}
	.mypage-name{
		height: 110px;
		line-height: 110px;
	}
	
	.mypage-name i{
		display: block;
	}
	.mypage-name p span{
		width: 140px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.mypage-name p,.mypage-good span{
		font-size: 16px;
	}
	.mypage-name img{
		width:70px;
		height:70px;
		border-radius: 50%;
		position: absolute;
		left: 24px;
		top: 24px;
	}
	
	.mypage-name p {
		margin-left: 110px;
		color: #fff;
		padding-top: 8px;
	}
	.mypage-name button{
		width: 80px;
		height:18px;
		line-height: 18px;
		background-color: #fff;
		border: none;
		border-radius: 15px;
		position: absolute;
		right: 30px;
		top: 55px;
		font-size: 14px;
	}
	.mypage-name,.mypage-good{
		background-color: @color;
	}
	
	.mypage-good,.mypage-like{
		display: flex;
		justify-content: space-between;
		text-align: center;
	}
	.mypage-good>div,.mypage-like>div{
		width: 50%;
	}
	.mypage-good{
		color: #fff;
		padding:10px 0;
	}
	.mypage-like{
		background-color: #fff;
		padding-bottom:10px;
	}
	.mypage-like em,.mypage-good em{
		font-style: normal;
		font-size: 14px;
	}
	.mypage-like span{
		margin:4px 0;
	}
	.mypage .van-cell__title {
		text-align: left;
	}
	.mypage .van-nav-bar__content{
		background-color: @color;
	}
	.mypage .van-nav-bar .van-icon,.van-nav-bar__title{
		color: #fff;
	}
	
	.mypage-main{
		margin: 10px 0;
	}
	.mypage-quit button{
		width: 100%;
		background-color: #fff;
		border: none;
		height: 40px;
		color: #f00;
	}
</style>
